$(function() {

    ///$("#li").hide();
    //$('#user_level').text()

//display_inputmode();
var flag =localStorage.getItem('artical_status')
if (flag) {
  if (flag =="1") {
    display_inputmode();
  //flag = "-1";
//localStorage.setItem('artical_status',JSON.stringify(flag))
  }
  else {
display_outputmode();
 // flag = "1";
//localStorage.setItem('artical_status',JSON.stringify(flag))
  }

}

else {


flag = "1";
localStorage.setItem('artical_status',JSON.stringify(flag))
display_inputmode();

}

///
});

function display_inputmode(){

   // $('#').show();
  $('#input_text').show();
$('#artical_input_ok').show();   
//
  $('#artical_out').hide();
$('#artical_input').hide();
$('#li').hide();
$('#artical_Music').hide(); 
};

function display_outputmode(){
 // $('#').show();
 $('#li').hide();
  var input_text=localStorage.getItem('artical_text')
localStorage.setItem('artical_text',input_text);  
  //console.log(text);



//var text =localStorage.getItem('artical_text');
if (input_text){
  $('#artical_out').html(input_text);

//begin fetch
    var data = new FormData();
    //var input_text=$('#word_index').text();

    data.append( "input_text", input_text );

    var myHeaders = new Headers();

fetch("/artical_mode/grade_list/",
{
    method: "POST",
    body: data,
    headers: myHeaders,
  credentials: "include"
})
.then(function(response) {
    return response.json();
  })
  .then(function (myJson){
    grade_list=myJson.grade_list;
   return display_gradelist(grade_list);
    //grade_list=myJson.grade_list;
   //return display_gradelist(grade_list);
  })
  .then(function(){
    var data=new Date();
    var name ="/artical_mode/"+data.valueOf().toString()+".mp3";
    $('#artical_Music').attr('src',name)
  })


///end fetch


}
else{$('#artical_out').html("please input");};

  $('#artical_out').show();

$('#artical_input').show();
//$('#li').show();
$('#artical_Music').show(); 
//
  $('#input_text').hide();
$('#artical_input_ok').hide();
//$('#li').hide();
//$('#artical_Music').hide();
};

function click_ok(){
  var text=$('#input_text').val();
localStorage.setItem('artical_text',text);  
//localStorage.setItem('artical_status',"1"); 
  console.log("text:",text);
  localStorage.setItem('artical_status',"-1"); 
};

function click_input(){
  //var text=$('#input_text').val();
localStorage.setItem('artical_status',"1");  
//localStorage.setItem('artical_status',"1"); 
  console.log("text:",text);
};

$('#artical_input_ok').bind('click',click_ok)
$('#artical_input').bind('click',click_input)

function display(myJson){
      $('#li #word_index').text(myJson.user_level.toString());
      $('#li #word').text(myJson.word);
      $('#li #word_tip').text(myJson.word_tip);
      $('#li #word_def').text(myJson.word_def); 
      $('#li #wordMusic').attr('src',myJson.wordMusic);
      $('#li #image_a').attr('src',myJson.image_a);
       $('#li #image_b').attr('src',myJson.image_b);
       $('#li #clipart_c').attr('src',myJson.clipart_c);
       $('#li #clipart_d').attr('src',myJson.clipart_d);
       $('#li .to_bag').attr('checked',false);
       var word=myJson.word;

              var dict_mw="https://www.merriam-webster.com/dictionary/"+word;
      // console.log(dict_mw);
        var dict_vo="https://www.vocabulary.com/dictionary/"+word;
       //console.log(dict_mw);
        var dict_bi="https://cn.bing.com/dict/search?q="+word;
       //console.log(dict_mw);
        var dict_the="https://www.freethesaurus.com/"+word;
       //console.log(dict_mw);      
       var dict_col="http://www.freecollocation.com/search?word="+word;
         $('#li #dict_mw').attr('href',dict_mw);
      
       $('#li #dict_vo').attr('href',dict_vo);
        $('#li #dict_bi').attr('href',dict_bi);
          $('#li #dict_the').attr('href',dict_the);
        $('#li #dict_col').attr('href',dict_col);

        $(".expand_explode_list").remove();
};

function display_gradelist(grade_list){
  var cloneCount = 1;
  //console.log(JSON.stringify(bag));
  grade_list.forEach(function(item){
    var myHeaders = new Headers();
//fetch('https://account.scio.com/api/login/v1')
    var path ="/learnmode/jq/"+item.toString();
    cloneCount=cloneCount+1;
    var id_curr= 'li'+ cloneCount.toString();
    $("#li").clone().attr('id',id_curr.toString()).appendTo("ul")
    $("#"+id_curr).attr('class',("expand_explode_list ")+$("#"+id_curr).attr('class'))
              $('#'+id_curr.toString()).show()
              $('#'+id_curr.toString()+" #wordMusic").removeAttr('autoplay')
///$("#li").clone().appendTo("ul");
     /// console.log(next_user_level.toString());
  fetch(path, {
              method: 'GET',
              headers: myHeaders,
              credentials: "include"
            })       
  .then(function(response) {
    return response.json();
  })
  .then(function (myJson){
      //$('#'+id_curr.toString())
      $('#'+id_curr.toString()+' '+'#word_index').text(item.toString())
      var word=myJson.word;
    //  console.log(word);
      $('#'+id_curr.toString()+' '+'#word').text(myJson.word);
      $('#'+id_curr.toString()+' '+'#word_tip').text(myJson.word_tip);
      $('#'+id_curr.toString()+' '+'#word_def').text(myJson.word_def); 
      $('#'+id_curr.toString()+' '+'#wordMusic').attr('src',myJson.wordMusic);
      $('#'+id_curr.toString()+' '+'#image_a').attr('src',myJson.image_a);
       $('#'+id_curr.toString()+' '+'#image_b').attr('src',myJson.image_b);
       $('#'+id_curr.toString()+' '+'#clipart_c').attr('src',myJson.clipart_c);
       $('#'+id_curr.toString()+' '+'#clipart_d').attr('src',myJson.clipart_d);

       var dict_mw="https://www.merriam-webster.com/dictionary/"+word;
      // console.log(dict_mw);
       $('#'+id_curr.toString()+' '+'#dict_mw').attr('href',dict_mw);
        var dict_vo="https://www.vocabulary.com/dictionary/"+word;
       //console.log(dict_mw);
       $('#'+id_curr.toString()+' '+'#dict_vo').attr('href',dict_vo);
        var dict_bi="https://cn.bing.com/dict/search?q="+word;
       //console.log(dict_mw);
       $('#'+id_curr.toString()+' '+'#dict_bi').attr('href',dict_bi);

        var dict_the="https://www.freethesaurus.com/"+word;

         $('#'+id_curr.toString()+' '+'#dict_the').attr('href',dict_the);

         var dict_col="http://www.freecollocation.com/search?word="+word;

         $('#'+id_curr.toString()+' '+'#dict_col').attr('href',dict_col);
         
      $('#'+id_curr.toString()+' '+'.to_bag').attr('checked',false);

        $('#'+id_curr.toString()+' '+'.to_bag').click(function(){
          var word=($(this).parent().parent().parent().find("#word").text());
      //if (($(this).attr("checked"=="checked"))){
        if ($(this).is(':checked')){

          
      //alert(word+"   had been put into bag");

    //console.log("here");
  
    var user_level=parseInt(($(this).parent().parent().find("#word_index").text()));
   //console.log(user_level)
      var bag=JSON.parse(localStorage.getItem('bag'));

      flag = bag.indexOf(user_level);
      if (flag==-1)
      {
       bag.push(user_level);   
     };
         
      var bag_len=bag.length;

      $('#bag_len').text(bag_len.toString());
      localStorage.setItem('bag',JSON.stringify(bag));

                      };//end if

        });


} );///end then

});//end grade_list

}; ///end function

